<template>
  <AppPage>
    <n-scrollbar>
      <div class="flex flex-sub flex-column justify-between">
        <n-grid cols="3" item-responsive>
          <n-grid-item span="0:3 800:3 1000:2" class="flex flex-sub">
            <n-grid cols="4" item-responsive>
              <n-grid-item span="0:4" class="flex flex-sub">
                <div class="bg-img bg-mask  margin-lr-sm margin-top radius-lg flex-sub"
                     style="background-image: url('https://image.meiye.art/FlqKg5bugFQD5Qzm_QhGM7ET4Mtx?imageMogr2/thumbnail/450x/interlace/1');height: 200px">
                  <div class="padding-xxl text-white">
                    <div class="padding-xs text-xl">
                      欢迎回来！
                    </div>
                    <div class="padding-xs">
                      祝您工作愉快！
                    </div>
                  </div>
                </div>
              </n-grid-item>
              <n-grid-item span="0:0 400:2 800:1" class="flex flex-sub flex-column margin-sm">
                <div class=" bg-white flex flex-sub  radius-lg">
                  <n-thing class="padding-sm">
                    <template #header>
                      <n-text class="text-bold">
                        今日挂号人次
                      </n-text>
                      <n-text class="text-gray">
                        (人)
                      </n-text>
                    </template>
                    <n-text class="margin-left text-bold text-xl">
                      <n-number-animation :from="0" :to="75"/>
                    </n-text>
                    <template #footer>
                      <n-text class="text-gray">人数较昨日上涨</n-text>
                      <n-text class="text-red">23%</n-text>
                    </template>
                  </n-thing>
                </div>
              </n-grid-item>
              <n-grid-item span="0:0 400:2 800:1" class="flex flex-sub flex-column margin-sm">
                <div class=" bg-white flex flex-sub radius-lg">
                  <n-thing class="padding-sm">
                    <template #header>
                      <n-text class="text-bold">
                        今日看诊人次
                      </n-text>
                      <n-text class="text-gray">
                        (人)
                      </n-text>
                    </template>
                    <n-text class="margin-left text-bold text-xl">
                      <n-number-animation :from="0" :to="75"/>
                    </n-text>
                    <template #footer>
                      <n-text class="text-gray">人数较昨日上涨</n-text>
                      <n-text class="text-red">23%</n-text>
                    </template>
                  </n-thing>
                </div>
              </n-grid-item>
              <n-grid-item span="0:0 400:2 800:1" class="flex flex-sub flex-column margin-sm">
                <div class=" bg-white flex flex-sub radius-lg">
                  <n-thing class="padding-sm">
                    <template #header>
                      <n-text class="text-bold">
                        今日访问人次
                      </n-text>
                      <n-text class="text-gray">
                        (人)
                      </n-text>
                    </template>
                    <n-text class="margin-left text-bold text-xl">
                      <n-number-animation :from="0" :to="75"/>
                    </n-text>
                    <template #footer>
                      <n-text class="text-gray">人数较昨日上涨</n-text>
                      <n-text class="text-red">23%</n-text>
                    </template>
                  </n-thing>
                </div>
              </n-grid-item>
              <n-grid-item span="0:0 400:2 800:1" class="flex flex-sub flex-column margin-sm">
                <div class=" bg-white flex flex-sub radius-lg">
                  <n-thing class="padding-sm">
                    <template #header>
                      <n-text class="text-bold">
                        今日合计收入
                      </n-text>
                      <n-text class="text-gray">
                        (元)
                      </n-text>
                    </template>
                    <n-text class="margin-left text-bold text-xl">
                      <n-number-animation :from="0" :to="75"/>
                    </n-text>
                    <template #footer>
                      <n-text class="text-gray">人数较昨日上涨</n-text>
                      <n-text class="text-red">23%</n-text>
                    </template>
                  </n-thing>
                </div>
              </n-grid-item>
            </n-grid>
          </n-grid-item>
          <n-grid-item span="0:3 800:3 1000:1" class="flex flex-sub bg-white margin-sm radius-lg justify-center">
            <div class="padding">
              <n-calendar
                  style="height: 400px"
                  #="{ year, month, date }">
              </n-calendar>
            </div>
          </n-grid-item>
        </n-grid>
        <n-grid cols="2" item-responsive>
          <n-grid-item span="0:2 1000:1 " class="flex flex-sub bg-white margin-sm radius-lg">
            <ConsoleChart></ConsoleChart>
          </n-grid-item>
          <n-grid-item span="0:2 1000:1 " class="flex flex-sub bg-white margin-sm radius-lg">
            <AppointmentTable></AppointmentTable>
          </n-grid-item>
        </n-grid>
      </div>
    </n-scrollbar>
  </AppPage>
</template>

<script setup lang="ts">

import AppointmentTable from "@/components/example/table/AppointmentTable.vue";
import ConsoleChart from "@/components/example/charts/ConsoleChart.vue";
import CommonPage from "@/components/page/CommonPage.vue";
import AppPage from "@/components/page/AppPage.vue";</script>

<style scoped>

</style>